<script>
    (function () {
        const error_show = document.createElement('div');
        error_show.style.cssText = 'display:none;white-space:pre;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);color:#fff;z-index:999999;line-height:1.5;padding:100px;overflow:auto;';
        document.body.appendChild(error_show);
        if(window.EventSource) {
            var expire
            /** @type {EventSource} */
            var sse;
            function start_listen () {
                sse = new EventSource('/{{prefix}}?referer={{referer}}' + (expire ? `&expire=${expire}` : ''));
                sse.addEventListener('message', function (e) {
                    if (!e.data.trim()) {return;}
                    /** @type {{ update: boolean; updateDeps: {origin:string; output:string; hash:string;}[] }} */
                    const info = JSON.parse(e.data);
                    expire = info.expire;

                    error_show.innerText = '';
                    error_show.style.display = 'none';       
                    if (info.updateDeps) {
                        for (let i = 0; i < info.updateDeps.length; i++) {
                            const { origin, output, hash, error } = info.updateDeps[i];
                            if (error) {
                                error_show.innerText = error;
                                error_show.style.display = 'block';
                                return;
                            }
                            const el = document.querySelector('[data-origin="' + origin + '"]');
                            if (el) {
                                const _hash = el.getAttribute('data-hash');
                                if (hash === _hash) { return; }
                                el.setAttribute('data-hash', hash);
                                const moduleId = el.getAttribute('data-module');
                                if (moduleId && window.__f2e_esbuild_inject_hot__) {
                                    const newEl = document.createElement('script')
                                    newEl.setAttribute('data-module', moduleId);
                                    newEl.setAttribute('data-origin', origin);
                                    newEl.setAttribute('data-hash', hash);
                                    newEl.async = true;
                                    newEl.onload = function () {
                                        window.__f2e_esbuild_inject_hot__.emit(moduleId);
                                    };
                                    newEl.src = output;
                                    el.parentNode.insertBefore(newEl, el);
                                    el.parentNode.removeChild(el);
                                } else if ('href' in el) {
                                    el.href = output;
                                } else {
                                    window.location.reload();
                                }
                            }
                        }
                    }
                    if (info.update) {
                        window.location.reload();
                    }
                });
            }
            function visibilityChange () {
                if (document.hidden) {
                    if (!!sse) sse.close();
                } else  {
                    start_listen();
                }
            };
            document.addEventListener("visibilitychange", visibilityChange, false);
            visibilityChange();
        }
    })()
</script>